<template>
    <div id="hotel-msg">
        <Swiper :list='oneHotel.img' loop auto dots-position="center" color="#123456"></Swiper>
        <!--<div>{{hotels}}</div>-->
        <div class="h-n">
            <div class="h-n-l">
                <span>{{oneHotel.name}}</span>
                <br>
                <span>
                    <img src="https://static.evente.cn/evente/c/wap/img/hotel/icon-wifi.png" alt="">
                    <img src="https://static.evente.cn/evente/c/wap/img/hotel/icon-food.png" alt="">
                    <img src="https://static.evente.cn/evente/c/wap/img/hotel/icon-car.png" alt="">
                    <img src="https://static.evente.cn/evente/c/wap/img/hotel/icon-swim.png" alt="">
                    <img src="https://static.evente.cn/evente/c/wap/img/hotel/icon-clothes.png" alt="">
                    <img src="https://static.evente.cn/evente/c/wap/img/hotel/icon-parking.png" alt="">
                </span>
            </div>
            <div class="h-n-r">
                <a href="">
                    <img src="https://static.evente.cn/evente/c/wap/img/changlong/lsdh.png" alt="">
                </a>客服
            </div>
        </div>
        <div class="info">
            <span>入住日期：<span></span><span class="fa fa-calendar cal"></span></span>
            <Group class="cal">
                <Calendar></Calendar>
            </Group>
            <span>退房日期：<span></span><span class="fa fa-calendar cal"></span></span>
            <span>共1晚</span>
        </div>
        <div class="hr">
            <span class="fa fa-home"></span>酒店信息
        </div>
        <div class="room-list">
            <div class="room-item" v-for="(r,i) in oneHotel.roomType">
                <div class="room-tit">
                    <div class="room-tit-l">
                        <img :src="r.img" alt="">
                    </div>
                    <div>{{r.type}}</div>
                    <div class="room-tit-r">
                        <div>
                            <span class="price">￥{{r.lowprice}}<span class="fa fa-angle-down sele" @click="changeSel(i)"></span></span><span></span>
                        </div>

                    </div>
                </div>
                <transition name="ani">
                    <div class="msg-ctrl" v-show="msgName[i]">
                        <div class="room-msg" v-for="m in r.has">
                            <div class="room-type">
                                <div><span>{{m.msg}}</span><span style="color:blue">></span></div>
                                <span><span v-for="t in m.type">{{t}}</span></span>
                            </div>
                            <div class="room-tit-r">
                                <div>
                                    <span class="price">￥{{m.price}}元起</span><span class="sel">选择</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </transition>


            </div>
        </div>
    </div>
</template>

<script>
    import { Swiper,Group,Calendar} from 'vux'
    import { mapState } from 'vuex'
    export default {
        data: function () {
            return {
                msgName: [],
            }
        },
        computed: {
            ...mapState([
                "oneHotel",
                "hotels"
            ])
        },
        components: {
            Swiper,
            Group,
            Calendar
        },
        mounted: function () {
            var params = { _id: this.$route.query._id }
            this.$store.dispatch("queryOneHotel", params)
                .then(res => {
                    this.$store.commit("setOneHotel", res.data.data);
                    res.data.data.roomType.forEach(function (e) {
                        this.msgName.push(true);
                    }, this);
                });
            params = {
                name: "酒店"
            }
            this.$store.dispatch("queryAH", params)
                .then(res => {
                    this.$store.commit("setHotels", res.data.data.has);
                });
        },
        methods: {
            changeSel: function (i) {
                this.$set(this.msgName, i, !this.msgName[i]);
            }
        }
    }

</script>

<style scoped>
    #hotel-msg {
        margin-top: 0.54rem;
        background-color: #f1f1f1;
    }

    #hotel-msg>div {
        background-color: white;
    }

    .h-n {
        font-size: 0.16rem;
        height: 0.85rem;
        /*line-height: 0.85rem;*/
        padding: 0.15rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .h-n img {
        width: 0.13rem;
        height: 0.14rem;
        margin: 0.05rem;
    }

    .h-n-r {
        height: 100%;
        width: 21%;
        border-left: 1px solid #f1f1f1;
        text-align: center;
        display: flex;
        align-items: center;
    }

    .h-n-r img {
        width: 0.22rem;
        height: 0.25rem;
    }

    .h-n-r a {
        font-size: 0.18rem;
    }

    .info {
        font-size: 0.13rem;
        display: flex;
        justify-content: space-between;
        padding: 0.15rem 0.15rem;
        margin: 0.1rem 0;
    }

    .info>span {
        width: 33%;
        text-align: left;
    }

    .info>span:nth-last-child(1) {
        text-align: right;
    }

    .cal {
        color: #2398fb;
        font-size: 0.2rem;
    }

    .hr {
        height: 0.45rem;
        line-height: 0.45rem;
        font-size: 0.14rem;
        padding: 0 0.15rem;
        margin: 0.1rem 0;
    }

    .room-list {
        font-size: 0.14rem;
    }

    .room-msg {
        display: flex;
        justify-content: space-between;
        padding: 0.1rem 0.12rem;
        border: 1px solid #eee;
        background-color: #f5f5f5;
    }

    .room-tit {
        display: flex;
        height: 1.05rem;
        padding: 0.1rem;
    }

    .room-tit-r {
        display: flex;
        align-items: center;
        width: 45%;
        flex-shrink: 0;
        flex-grow: 1;
        /*line-height: 1.05rem;*/
        padding: 0.1rem;
    }

    .room-tit-r div {
        flex-grow: 1;
        text-align: right;
    }

    .price {
        color: #e03300;
    }

    .sel {
        padding: 0.1rem;
        background-color: #e03300;
        line-height: 0.1rem;
        color: white;
        border-radius: 5%;
        margin-left: 0.05rem;
    }

    .sele {
        margin-left: 0.02rem;
        padding: 0.02rem 0.035rem;
        border: 1px solid #2398fb;
        border-radius: 50%;
        color: #2398fb;
    }

    .msg-ctrl {
        overflow: hidden;
    }
  .ani-leave{
       height: 20vh !important;
    /*height:  !important;*/
  }
  .ani-leave-active {
    transition: all 0.6s;
  }

  .ani-leave-to {
   height: 0 !important;
    /*transform: translateX(-100%);*/
  }
   .ani-enter{
       height: 0!important;
    /*height:  !important;*/
  }
  .ani-enter-active {
    transition: all 0.6s;
  }

  .ani-enter-to {
   height: 20vh !important;
    /*transform: translateX(-100%);*/
  }
  .cal{
      font-size: 0.18rem !important;
  }
  
</style>
<style>
    .inline-calendar{
      font-size: 0.17rem;
  }
</style>